<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.css" />
    <link rel="stylesheet" href="./css/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/sty.css">
    <script src="./js/bootstrap.bundle.js"></script>
    <script src="./js/vue.js"></script>
    <title>KFC</title>
    <style>
        #map {
            overflow: hidden;
            width: 100%;
            height: 600px;
            margin: 0;
            font-family: "微软雅黑";
        }

    </style>
  </head>
<body>
  <!-- 导航栏 -->
  <nav class="my-nav navbar navbar-expand-lg py-3 fixed-top">
      <div class="container">
        <!-- logo -->
        <a class="logo" href="./user.html"><img src="./img/LOGO.png" src="index.html"></a>
        <!-- 小菜单 -->
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#menu">
          <img src="./img/tong.svg" width="40px"></img>
        </button>

        <!-- 大菜单 -->
        <div class="collapse navbar-collapse justify-content-end" id="menu">
          <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link " href="index.html" >首页</a>    
              </li>
              <li class="nav-item">
                <a class="nav-link " href="about.html" >关于KFC</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link " href="scar.html" >购物车</a>
              </li>
              <li class="nav-item">
                <a class="nav-link " href="login.html" >登录</a>
              </li>
          </ul>
        </div>
      </div>
  </nav>


    <img src="img/MAP-TOP.png" alt="">
    

    <div class="container">
        <div id="map"></div>


        <div style="display: flex; justify-content: space-evenly;">
          <img src="img/catcat.gif">
          <h2 class="display-5" style="font-weight: 500; text-align:center;margin: auto 0;color:rgb(232,67,67);border-bottom: 4px dashed orange;padding: 5px 0;">请自行前往指定KFC取餐</h2>
        </div>


        <div style="display: flex;justify-content: space-around;">

          <div class="motai">
            <!-- Button trigger modal -->
            <img
              src="img/assistant-manager.jpg"
              type="button"
             
              data-bs-toggle="modal"
              data-bs-target="#exampleModal1"
            >
            </img>
            <div class="wenzi">
              MANAGER
            </div>
      
            <!-- Modal -->
            <div
              class="modal fade"
              id="exampleModal1"
              tabindex="-1"
            >
              <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <img src="img/icon_kfc_top.svg" alt="">
                    <h5 class="modal-title" id="exampleModalLabel">ASSISTANT MANAGER</h5>
                    <button
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div>
                  <div class="modal-body">
                    KFC is a world-famous brand that respects its employees and their values. We’ve earned the loyalty of our restaurant leaders by offering them potential advancement opportunities and great training programs. Right now, we’re hiring smart, caring leaders who have what it takes to motivate employees while creating a friendly, family-oriented restaurant for everybody. You can achieve your career goals at KFC!
                  </div>
                  <div class="modal-footer">
                    <button
                      
                      type="button"
                      class="btn btn-secondary"
                      data-bs-dismiss="modal"
                    >
                      Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
      
          <div class="motai">
            <!-- Button trigger modal -->
            <img
              src="img/cook.jpg"
              type="button"
             
              data-bs-toggle="modal"
              data-bs-target="#exampleModal2"
            >
            </img>
            <div class="wenzi">
              COOK
            </div>
      
            <!-- Modal -->
            <div
              class="modal fade"
              id="exampleModal2"
              tabindex="-1"
            >
              <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <img src="img/icon_kfc_top.svg" alt="">
                    <h5 class="modal-title" id="exampleModalLabel">COOK</h5>
                    <button
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div>
                  <div class="modal-body">
                    We’ll put our secret recipe in your hands and train you to be the best cook you can be. Our restaurants are busy (and near you!) and our growth potential is unlimited! Bring your positive attitude and desire to learn to KFC today!
                  </div>
                  <div class="modal-footer">
                    <button
                      
                      type="button"
                      class="btn btn-secondary"
                      data-bs-dismiss="modal"
                    >
                      Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
      
          <div class="motai">
            <!-- Button trigger modal -->
            <img
              src="img/kfc_customer_sevice.jpg"
              type="button"
             
              data-bs-toggle="modal"
              data-bs-target="#exampleModal3"
            >
            </img>
            <div class="wenzi">
              COOK
            </div>
      
            <!-- Modal -->
            <div
              class="modal fade"
              id="exampleModal3"
              tabindex="-1"
            >
              <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <img src="img/icon_kfc_top.svg" alt="">
                    <h5 class="modal-title" id="exampleModalLabel">CUSTOMER SERVICE</h5>
                    <button
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div>
                  <div class="modal-body">
                    Eager to grow your customer service skills with a friendly team? Have fun learning and growing while serving our world-famous southern-inspired meals to customers. We have a restaurant near you that will appreciate your authenticity, upbeat attitude and hard work!
                  </div>
                  <div class="modal-footer">
                    <button
                      
                      type="button"
                      class="btn btn-secondary"
                      data-bs-dismiss="modal"
                    >
                      Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      <div id="heart">
        <li style="flex-direction: row-reverse;">
          <div>
              <span>David Gibbs, CEO of Yum! Brands.</span><br>
              <span style="font-size: 30px;">
                WORKING TOGETHER, WE CAN LIMIT THE SPREAD OF COVID-19 WHILE OFFERING CONVENIENT, AFFORDABLE FOOD IN A LOW CONTACT ENVIRONMENT.</span>
          </div>
          <div class="tupian1">
              <img src="img/banner-quote-safety.jpg" alt="">
          </div>
        </li>
      </div>
            
    </div>

    <img src="img/end-footer-big.png" alt="">
  
    <!-- footer -->
    <footer class="bd-footer py-5 mt-5 bg-white">
            <div class="container py-3">
              <div class="row">
                <div class="col-lg-3 mb-3 text-black">
                  <img src="img/logo-kfc.svg" style="margin: 5px 0 0;">
                  <ul class="list-unstyled">
                    <li><img src="./img/download.png" alt=""></li>
                    <h4 style="margin-top: 10px;">湖北-武汉</h4>
                  </ul>
                </div>
                <div class="col-lg-3 mb-3 text-black">
                  <h3>背后故事</h3>
                  <ul class="list-unstyled">
                    <li>关于KFC</li>
                    <li>经营理念</li>
                    <li>后勤保障</li>
                    <li>保护环境</li>
                  </ul>
                </div>
                <div class="col-lg-3 mb-3 text-black">
                  <h3>欢迎您来</h3>
                  <ul class="list-unstyled">
                    <li>加盟我们</li>
                    <li>您的建议</li>
                    <li>意见反馈</li>
                    <li>餐厅地图</li>
                  </ul>
                </div>
                <div class="col-lg-3 mb-3 text-black">
                  <h3>企业责任</h3>
                  <ul class="list-unstyled">
                    <li>以食为天</li>
                    <li>以人为本</li>
                    <li>以爱为先</li>
                    <li>以绿为源</li>
                  </ul>
                </div>
              </div>
      
              <div class="footer-row-bottom end">
                <div class="footer-columnb"><img src="img/Youtube.png" alt=""></div>
                <div class="footer-columnb"><img src="img/Twitter.png" alt=""></div>
                <div class="footer-columnb"><img src="img/TikTok.png" alt=""></div>
                <div class="footer-columnb"><img src="img/Facebook.png" alt=""></div>
                <div class="footer-columnb"><img src="img/Instagram.png" alt=""></div>
              </div>
      
              <div class="footter-icon end">
                <div class="footer-columnb"><span>Secure Payment</span></div>
                <div class="footer-columnb"><img src="img/GrabPay.png" alt=""></div>
                <div class="footer-columnb"><img src="img/Mastercard.png" alt=""></div>
                <div class="footer-columnb"><img src="img/Shopeepay.png" alt=""></div>
                <div class="footer-columnb"><img src="img/MaybankQR.png" alt=""></div>
                <div class="footer-columnb"><img src="img/Visa.png" alt=""></div>
                <div class="footer-columnb"><img src="img/Boost.png" alt=""></div>
                <div class="footer-columnb"><img src="img/TouchNGo.png" alt=""></div>
              </div>
      
              <div class="end"><span>Terms of Use
                |
                Privacy Policy
                |
                © Copyright 2022 QSR Stores Sdn. Bhd. (1098054)</span></div>
            </div>
      </footer>
      
</body>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=ymyNOHp8jjrO6MxmODnsvrG6n2Z0V02T"></script>
<script>
    var map = new BMapGL.Map("map");          // 创建地图实例 
    map.centerAndZoom(new BMapGL.Point(114.386,30.512), 16);

    // var point = new BMapGL.Point(114.386543,30.512241);  // 创建点坐标 
    // map.centerAndZoom(point, 18);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // map.setHeading(64.5);   //设置地图旋转角度
    // map.setTilt(73);       //设置地图的倾斜角度
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl); 


    var local = new BMapGL.LocalSearch(map, {
		renderOptions:{map: map}
	  });
	  local.search("肯德基");



     // 创建定位控件
     var locationControl = new BMapGL.LocationControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(20, 20)
        });
        // 将控件添加到地图上
        map.addControl(locationControl);

        // 添加定位事件
        locationControl.addEventListener("locationSuccess", function(e){
            var address = '';
            address += e.addressComponent.province;
            address += e.addressComponent.city;
            address += e.addressComponent.district;
            address += e.addressComponent.street;
            address += e.addressComponent.streetNumber;
            alert("当前定位地址为：" + address);
        });
        locationControl.addEventListener("locationError",function(e){
            alert(e.message);
        });


        // 禁止地图旋转和倾斜可以通过配置项进行设置
        var map = new BMapGL.Map("allmap",{
            enableRotate: false,
            enableTilt: false
        });

</script>
      
</html>
      